<!-- /* 参考 https://blog.csdn.net/Shinlyzsljay/article/details/78132793 */ -->
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
    html{height:100%}
    body{height:100%;margin:0px;padding:0px}
    #container{height:100%}
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=PwWgE4LMMZ3uhYdixLTh9lSw">
    //v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
    </script>
  </head>

  <body>
    <div id="container"></div>
    <script type="text/javascript">
       var websocket = new WebSocket('ws://localhost:8080');
       var makers = new Array();
       var tempPoint = null;
       var markerArr = [
           { id: "1", title: "名称：滴滴A", point: "113.264531,23.157003", address: "123456", tel: "12306" },
           /* { id: "2", title: "名称：滴滴B", point: "113.264542,23.154003", address: "123456", tel: "12306" },
           { id: "3", title: "名称：滴滴C", point: "113.264533,23.153003", address: "123456", tel: "12306" },
           { id: "4", title: "名称：滴滴D", point: "113.264533,23.153003", address: "123456", tel: "12306" }, */
       ];
       var map; //Map实例
       map_init()
       websocket.onopen = function (evnt) {
           console.log('ws is ok !');
           //发送消息
           var msg = '这个是来自浏览器的消息';
           websocket.send(msg);
       };

       websocket.onmessage = function (evnt) {
           console.log('ws ok -> get user local : ' + JSON.stringify(evnt.data))
           var bp0 = evnt.data.split(",")[0];
           var bp1 = evnt.data.split(",")[1];
           makers[0].setPosition(new window.BMap.Point(bp0, bp1));
         /*
           makers[0].getPosition().lng = bp0;
           makers[0].getPosition().lat = bp1;
          */
       };

       websocket.onerror = function (evnt) {
           console.log('ws client:error '+evnt)
       };

       websocket.onclose = function (evnt) {
           console.log('ws clent:close ')
       }

       function map_init() {
           map = new BMap.Map("container");

           //第1步：设置地图中心点
           var point = new BMap.Point(113.312213, 23.147267);
           //第2步：初始化地图,设置中心点坐标和地图级别。
           map.centerAndZoom(point, 1);
           //第3步：启用滚轮放大缩小
           map.enableScrollWheelZoom(true);
           //第4步：向地图中添加缩放控件
           var ctrlNav = new window.BMap.NavigationControl({
               anchor: BMAP_ANCHOR_TOP_LEFT,
               type: BMAP_NAVIGATION_CONTROL_LARGE
           });
           map.addControl(ctrlNav);
           //第5步：向地图中添加缩略图控件
           var ctrlOve = new window.BMap.OverviewMapControl({
               anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
               isOpen: 1
           });
           map.addControl(ctrlOve);

           //第6步：向地图中添加比例尺控件
           var ctrlSca = new window.BMap.ScaleControl({
               anchor: BMAP_ANCHOR_BOTTOM_LEFT
           });
           map.addControl(ctrlSca);
           //点击事件
           map.addEventListener("click", showInfo);

           function showInfo(e) {//鼠标点击显示经纬度
               //alert(e.point.lng + ", " + e.point.lat);
               alert("websocket触发");

               if(confirm("是否发送websocket？")==true){
                   websocket.send("浏览器发送过来的消息");
               }
               tempPoint = e;
           }

           //第7步：绘制点
           for (var i = 0; i < markerArr.length; i++) {
               var p0 = markerArr[i].point.split(",")[0];
               var p1 = markerArr[i].point.split(",")[1];
               var maker = addMarker(new window.BMap.Point(p0, p1), i);
               makers[i] = maker;
               addInfoWindow(maker, markerArr[i], i);
           }
       }
       // 添加信息
       function addMarker(point, index) {
           var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
               new BMap.Size(23, 25), {
                   offset: new BMap.Size(10, 25),
                   imageOffset: new BMap.Size(0, 0 - index * 25)
               });
           var marker = new BMap.Marker(point, { icon: myIcon });
           marker.enableDragging();
           map.addOverlay(marker);
           return marker;
       }

       function getActPoint(id){
           var marketpoint =makers[id].getPosition();
           alert(tempPoint.point.lng+"  ,"+tempPoint.point.lat);
       }

       // 添加信息窗口
       function addInfoWindow(marker, poi,e) {
           //pop弹窗标题
           var title = '<p style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '</p>';
           //pop弹窗信息
           var html = [];
           html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
           html.push('<tr>');
           html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>');
           html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' </td>');
           html.push('</tr>');
           html.push('<tr>');
           html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">电话:</td>');
           html.push('<td style="vertical-align:top;line-height:16px">' + poi.tel + ' </td>');
           html.push('</tr>');
           html.push('</tbody></table>');
           html.push('<div>');
           html.push('<button onclick=\"getActPoint('+poi.id+');\">显示当前位置</button>');
           html.push('</div>');
           var infoWindow = new BMap.InfoWindow(html.join("*"), { title: title, width: 200 });

           var openInfoWinFun = function () {
               marker.openInfoWindow(infoWindow);
           };
           marker.addEventListener("click", openInfoWinFun);
           marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
           return openInfoWinFun;
       }
    </script>
  </body>
</html>
